<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" @reset="clearSearch">
      <el-col :span="8" v-show="$permiss[122]">
        <el-form-item :label="$t('所属租户')" prop="adminUserId">
          <el-select v-model="page.adminUserId" style="width: 100%" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId"
                       :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('产品ID')" prop="productName">
          <el-input v-model="page.productName" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('上架类型')" prop="listType">
          <el-select v-model="page.listType" style="width: 100%" clearable>
            <el-option :label="$t('上架APP')" :value="1"></el-option>
            <el-option :label="$t('非上架APP')" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('APP类型')" prop="appType">
          <el-select v-model="page.appType" style="width: 100%" clearable>
            <el-option label="H5" :value="1"></el-option>
            <el-option label="APP" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('状态')" prop="status">
          <el-select v-model="page.status" style="width: 100%" clearable>
            <el-option :value="0" :label="$t('禁用')"></el-option>
            <el-option :value="1" :label="$t('启用')"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </SearchForm>

    <el-card shadow="never" style="margin-top: 10px">
      <el-row style="text-align: right">
        <el-button type="primary" v-show="$permiss[120]" @click="visibleAddApp = true">{{ $t('新增') }}</el-button>
      </el-row>
      <el-row style="margin-top: 10px">
        <Table :table-data="tableData" :table-column="tableColumn" row-key="id" :page="page"
               :loading="loading"
               @handleSizeChange="handleSizeChange"
               @handleCurrentChange="handleCurrentChange">
          <template slot="appType" slot-scope="{row}">
            {{ row.listType === 1 ? $t('上架APP') : $t('非上架APP') }}
          </template>
          <template slot="h5Url" slot-scope="{row}">
            <div style="display: flex">
              <div class="overflow" style="margin-right: 5px" :title="row.h5Url" slot="reference">{{ row.h5Url }}</div>
              <i class="el-icon-document-copy cursor_pointer" v-show="row.h5Url" style="font-size: 18px"
                 @click="copyLink(row.h5Url)"></i>
            </div>
          </template>
          <template slot="isH5" slot-scope="{row}">
            {{ row.isH5 === 1 ? 'H5' : 'APP' }}
          </template>
          <template slot="status" slot-scope="{row}">
            <el-switch :disabled="!$permiss[124]" @change="changeStatus(row)"
                       :value="row.status === 1"></el-switch>
          </template>
          <template slot="handle" slot-scope="{row}">
            <el-button type="text" @click="tableRow(row,'set')" v-show="$permiss[868]">{{ $t('综合设置') }}</el-button>
            <el-button v-show="$permiss[121]" type="text" @click="tableRow(row,'bing')"
                       :disabled="row.adminUserName ? true : false">{{ $t('绑定') }}
            </el-button>
            <el-button v-show="$permiss[123]" type="text" @click="tableRow(row,'edit')"
                       :disabled="row.adminUserName ? false : true">{{ $t('编辑') }}
            </el-button>
          </template>
        </Table>
      </el-row>
    </el-card>
    <!--    新增App-->
    <Dialog :visible.sync="visibleAddApp" @confirm="productSubmit" @close="addFormClear"
            @cancel="visibleAddApp = false" :title="$t('新增APP')">
      <el-form :model="addForm" label-width="100px" ref="addForm">
        <el-form-item :label="$t('APP名称')" :rules="[
          {required: true, message: this.$t('不能为空')},
        ]" prop="appName">
          <el-input v-model="addForm.appName"></el-input>
        </el-form-item>
        <el-form-item label="产品ID" prop="productName" :rules="[
          {required: true, message: this.$t('不能为空')},
        ]">
          <el-input v-model="addForm.productName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('上架类型')" prop="listType" :rules="[
          {required: true, message: this.$t('不能为空')},
        ]">
          <el-select v-model="addForm.listType" style="width: 100%;" :placeholder="$t('请选择是否为上架包')">
            <el-option :label="$t('上架APP')" :value="1"></el-option>
            <el-option :label="$t('非上架APP')" :value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="isH5" :rules="[
          {required: true, message: this.$t('不能为空')},
        ]" :label="$t('APP类型')">
          <el-select v-model="addForm.isH5" style="width: 100%;">
            <el-option label="H5" :value="1"></el-option>
            <el-option label="APP" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="addForm.isH5 === 1" :label="$t('H5链接')" :rules="[
          {required: true, message: this.$t('不能为空')},
        ]" prop="h5Url">
          <el-input v-model="addForm.h5Url"></el-input>
        </el-form-item>
      </el-form>
    </Dialog>
    <!--    编辑 绑定-->
    <Dialog :visible.sync="visible.isShow" @confirm="editSubmit" @close="clearForm"
            @cancel="visible.isShow = false" :title="form.productName + ' - ' + visible.title">
      <el-form :model="form" label-width="120px" :rules="rulesForm" ref="form">
        <!--         编辑表单-->
        <el-form-item :label="$t('选择租户') + ':'" prop="adminUserId">
          <el-select v-model="form.adminUserId"
                     :disabled="form.adminUserId && visible.type === 'edit'">
            <el-option v-for="item in selectTenant" :label="item.adminName" :key="item.adminUserId"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="appName" :label="$t('APP名称')">
          <el-input v-model="form.appName" style="width: 210px"/>
        </el-form-item>
        <el-form-item label-width="40px">
          <el-button type="text" style="font-size: 18px">{{ $t('费用设置') }}</el-button>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('用户注册')" prop="flowFee">
              <el-input v-model="form.flowFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('OCR识别')" prop="ocrFee">
              <el-input v-model="form.ocrFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('运营商认证')" prop="operatorFee">
              <el-input v-model="form.operatorFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('身份校验')" prop="identityFee">
              <el-input v-model="form.identityFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('银行卡校验')" prop="elementsFee">
              <el-input v-model="form.elementsFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('风控费')" prop="dataFee">
              <el-input v-model="form.dataFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('收款服务费')" prop="withholdFee">
              <el-input v-model="form.withholdFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('放款服务费')" prop="substituteFee">
              <el-input v-model="form.substituteFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('黑名单费用')" prop="blacklistFee">
              <el-input v-model="form.blacklistFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12" :xs="24">-->
          <!--            <el-form-item :label="$t('短信费')" prop="messageFee">-->
          <!--              <el-input v-model="form.messageFee"-->
          <!--                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('活体检测费')" prop="livingFee">
              <el-input v-model="form.livingFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('第三方多头费')" prop="complexDetectionFee">
              <el-input v-model="form.complexDetectionFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('人脸黑名单费')" prop="faceBlacklistFee">
              <el-input v-model="form.faceBlacklistFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('人脸对比费')" prop="faceFee">
              <el-input v-model="form.faceFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('税卡校验费')" prop="rfcFee">
              <el-input v-model="form.rfcFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('邮件费')" prop="mailFee">
              <el-input v-model="form.mailFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('语音电话费')" prop="voiceCallFee">
              <el-input v-model="form.voiceCallFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('语音验证码费')" prop="voiceVerifyFee">
              <el-input v-model="form.voiceVerifyFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('验证码短信费')" prop="codeFee">
              <el-input v-model="form.codeFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('通知短信费')" prop="informFee">
              <el-input v-model="form.informFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('营销短信费')" prop="marketingFee">
              <el-input v-model="form.marketingFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('反欺诈费')" prop="antiFraudFee">
              <el-input v-model="form.antiFraudFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('语音群呼费用')" prop="voiceGroupFee">
              <el-input v-model="form.voiceGroupFee"
                        oninput="value = value.replace(/[^\d.]/g, '')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Dialog>

    <!--    进件设置-->
    <ComprehensiveSet :rows="form" :visible.sync="visibleScore" @confrim="getTableData"></ComprehensiveSet>

  </div>
</template>

<script>
import ComprehensiveSet from "./comprehensiveSet";
import {fetchTenantProductList, addTenantProduct, bindTenant, updateProduct, updateStatusProduct} from '@/api/product'
import {selectTenant} from '@/api/system'

export default {
  name: 'appList',
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      loading: false,
      form: {},
      rulesForm: {
        dataFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        elementsFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        flowFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        messageFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        ocrFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        operatorFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        substituteFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        withholdFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        blacklistFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        identityFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        livingFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        complexDetectionFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        faceFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        rfcFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        mailFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        voiceCallFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        faceBlacklistFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        voiceVerifyFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        informFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        codeFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        marketingFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        antiFraudFee: [
          {required: true, message: this.$t('不能为空')},
        ],
        voiceGroupFee:[
          {required: true, message: this.$t('不能为空')},
        ],
        adminUserId: [
          {required: true, message: this.$t('不能为空')},
        ],
        appName: [
          {required: true, message: this.$t('不能为空')},
        ]
      },
      selectTenant: [],
      tableData: [],
      tableColumn: [
        {
          label: this.$t('所属租户'),
          prop: 'adminUserName',
          align: 'center',
          width: 100,
          isHide: !this.$permiss[122]
        },
        {label: this.$t('产品ID'), prop: 'productName', align: 'center', width: 100},
        {label: this.$t('APP名称'), prop: 'appName', align: 'center', width: 100},
        {label: this.$t('上架类型'), prop: 'listType', align: 'center', width: 100, slot: 'appType'},
        {label: this.$t('APP类型'), prop: 'isH5', align: 'center', width: 100, slot: 'isH5'},
        {label: this.$t('H5链接'), prop: 'h5Url', slot: 'h5Url', align: 'center', width: 150,},
        // {label: this.$t('短信费'), prop: 'messageFee', align: 'center', width: 100},
        {label: this.$t('用户注册'), prop: 'flowFee', align: 'center', width: 100},
        {label: this.$t('OCR识别'), prop: 'ocrFee', align: 'center', width: 100},
        {label: this.$t('运营商认证'), prop: 'operatorFee', align: 'center', width: 100},
        {label: this.$t('身份校验'), prop: 'identityFee', align: 'center', width: 100},
        {label: this.$t('银行卡校验'), prop: 'elementsFee', align: 'center', width: 100},
        {label: this.$t('风控费'), prop: 'dataFee', align: 'center', minWidth: 100},
        {label: this.$t('放款服务费'), prop: 'substituteFee', align: 'center', minWidth: 100},
        {label: this.$t('收款服务费'), prop: 'withholdFee', align: 'center', minWidth: 100},
        {label: this.$t('黑名单费用'), prop: 'blacklistFee', align: 'center', minWidth: 100},
        {label: this.$t('人脸黑名单费'), prop: 'faceBlacklistFee', align: 'center', minWidth: 150},
        {label: this.$t('人脸对比费'), prop: 'faceFee', align: 'center', minWidth: 100},
        {label: this.$t('活体检测费'), prop: 'livingFee', align: 'center', minWidth: 100},
        {label: this.$t('第三方多头费'), prop: 'complexDetectionFee', align: 'center', minWidth: 150},
        {label: this.$t('税卡校验费'), prop: 'rfcFee', align: 'center', minWidth: 100},
        {label: this.$t('邮件费'), prop: 'mailFee', align: 'center', minWidth: 100},
        {label: this.$t('语音电话费'), prop: 'voiceCallFee', align: 'center', minWidth: 100},
        {label: this.$t('语音验证码费'), prop: 'voiceVerifyFee', align: 'center', minWidth: 100},
        {label: this.$t('验证码短信费'), prop: 'codeFee', align: 'center', minWidth: 100},
        {label: this.$t('通知短信费'), prop: 'informFee', align: 'center', minWidth: 100},
        {label: this.$t('营销短信费'), prop: 'marketingFee', align: 'center', minWidth: 100},
        {label: this.$t('反欺诈费'), prop: 'antiFraudFee', align: 'center', minWidth: 100},
        {label: this.$t('语音群呼费用'), prop: 'voiceGroupFee', align: 'center', minWidth: 100},
        {label: this.$t('创建人'), prop: 'inputName', align: 'center', minWidth: 120},
        {label: this.$t('创建时间'), prop: 'createTime', align: 'center', width: 150},
        {label: this.$t('状态'), slot: 'status', width: 100},
        {
          label: this.$t('操作'),
          slot: 'handle',
          width: 200,
          fixed: 'right',
          isHide: !this.$permiss[682] && !this.$permiss[121] && !this.$permiss[123]
        }
      ],
      addForm: {
        listType: 0,
      },
      visible: {
        isShow: false,
        title: '',
        type: ''
      },
      visibleAddApp: false,
      visibleScore: false,
      tenantList: []
    }
  },
  components: {
    ComprehensiveSet
  },
  watch: {
    'addForm.isH5': function (value) {
      if (value === 0) {
        this.addForm.h5Url = null
      }
    }
  },
  async mounted() {
    this.getTableData()
    this.tenantList = await selectTenant().then(res => res.data)
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    async getTableData() {
      const params = {
        ...this.page
      }
      this.loading = true
      const res = await fetchTenantProductList(params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.page = Object.assign({}, this.page, {
          total: total
        })
        this.loading = false
      } else {
        this.loading = false
      }
    },
    async getTenantList() {
      this.selectTenant = await selectTenant().then(res => res.data)
    },
    // 清空搜索框
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    },
    // 拷贝链接
    copyLink(text) {
      let input = document.createElement("input");
      input.value = text
      document.body.appendChild(input);
      input.select()
      document.execCommand('copy')
      this.$message.success(this.$t('复制成功'))
      document.body.removeChild(input);
    },
    async tableRow(row, type) {
      this.form = {...row}
      if (type === 'bing') {
        await this.getTenantList()
        this.visible = {
          isShow: true,
          type: 'bing',
          title: this.$t('绑定')
        }
      } else if (type === 'set') {
        this.visibleScore = true

      } else {
        await this.getTenantList()
        this.visible = {
          isShow: true,
          type: 'edit',
          title: this.$t('编辑')
        }

      }
    },

    // 新增产品提交
    async productSubmit() {
      this.$refs.addForm.validate(async v => {
        if (v) {
          const res = await addTenantProduct({...this.addForm, productName: this.addForm.productName.trim()})
          if (res.code === 1) {
            this.$message.success(this.$t('新增成功'))
            this.visibleAddApp = false
            this.getTableData()
          }
        }
      })
    },
    addFormClear() {
      this.addForm = {
        listType: 0,
      }
      this.$refs.addForm.resetFields()
    },
    // 编辑,绑定提交处理
    async editSubmit() {
      this.$refs.form.validate(async v => {
        if (v) {
          const params = {
            ...this.form,
            rfcFee: parseFloat(this.form.rfcFee),
            dataFee: parseFloat(this.form.dataFee),
            elementsFee: parseFloat(this.form.elementsFee),
            flowFee: parseFloat(this.form.flowFee),
            messageFee: parseFloat(this.form.messageFee),
            ocrFee: parseFloat(this.form.ocrFee),
            operatorFee: parseFloat(this.form.operatorFee),
            substituteFee: parseFloat(this.form.substituteFee),
            withholdFee: parseFloat(this.form.withholdFee),
            blacklistFee: parseFloat(this.form.blacklistFee),
            identityFee: parseFloat(this.form.identityFee),
            complexDetectionFee: parseFloat(this.form.complexDetectionFee),
            faceFee: parseFloat(this.form.faceFee),
            faceBlacklistFee: parseFloat(this.form.faceBlacklistFee),
            mailFee: parseFloat(this.form.mailFee),
            voiceCallFee: parseFloat(this.form.voiceCallFee),
            voiceVerifyFee: parseFloat(this.form.voiceVerifyFee),
            informFee: parseFloat(this.form.informFee),
            codeFee: parseFloat(this.form.codeFee),
            marketingFee: parseFloat(this.form.marketingFee),
            antiFraudFee: parseFloat(this.form.antiFraudFee),
            voiceGroupFee:parseFloat(this.form.voiceGroupFee),
          }
          const api = (params) => this.visible.type === 'bing' ? bindTenant(params) : updateProduct(params)
          const res = await api(params)
          if (res.code === 1) {
            this.$message.success(this.$t('修改成功'))
            this.visible.isShow = false
            this.getTableData()
          }
        }
      })
    },
    async changeStatus(row) {
      const reslut = async () => {
        const {adminProductId, productId} = row
        const res = await updateStatusProduct({
          adminProductId,
          productId,
          status: row.status ? 0 : 1
        })
        if (res.code === 1) {
          this.$message.success(this.$t('修改成功'))
          this.getTableData()
        }
      }
      // 判断该数据下有没有业务订单 有则显示弹出框
      if (row.isBusinessOrders === 1 && row.status) {
        this.$confirm(this.$t('当前APP存在业务订单，禁用后可能造成损失，请谨慎操作!'), this.$t('提示'), {
          confirmButtonText: this.$t('确认'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        }).then(() => {
          reslut()
        })
      } else {
        reslut()
      }
    },
    clearForm() {
      this.form = {}
      this.$refs.form.resetFields()
    },
  }
}
</script>

<style scoped>

</style>
